<template>
  <div class="app-container">
    <div class="default-box content-box">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" round @click="logDialog = true">
          触发记录
        </el-button>
        <el-button class="filter-item" round @click="statisticsDialog = true">
          频次统计
        </el-button>
        <div class="title">屏蔽关键词(逗号分割)</div>
        <el-input
          type="textarea"
          placeholder="请输入屏蔽关键词"
          :autosize="{ minRows: 10, maxRows: 30}"
        />
        <div class="align-right">
          <el-button class="filter-item" type="primary" icon="el-icon-check" round>
            提交
          </el-button>
          <el-button class="filter-item" icon="el-icon-refresh-right" round>
            重置
          </el-button>
        </div>
      </div>
    </div>
    <!--  频次统计对话框 -->
    <el-dialog
      title="信息"
      :visible.sync="statisticsDialog"
      width="80%"
      custom-class="operate-dialog main-bagcolor"
      top="10vh"
      center
    >
      <KeywordsStatistics />
    </el-dialog>
    <!--  触发记录对话框 -->
    <el-dialog
      title="消息"
      :visible.sync="logDialog"
      width="80%"
      custom-class="operate-dialog main-bagcolor"
      top="10vh"
      center
    >
      <KeywordsLog />
    </el-dialog>
  </div>
</template>

<script>
import KeywordsStatistics from './components/keywords-statistics'
import KeywordsLog from './components/keywords-log'
export default {
  name: 'ComplexTable',
  components: { KeywordsStatistics, KeywordsLog },
  data() {
    return {
      aatextarea: '',
      statisticsDialog: false,
      logDialog: false
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style scoped>
  .title{
    padding: 10px 0 10px;
  }
  .align-right{
    text-align: right;
    margin-top: 20px;
  }
</style>
